<template>
    <div class="home">
      <el-container>
        <el-aside width="200px">
          <div class="logo"></div>
          <el-menu
            default-active="1-2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="yellow"
            :router="true"
          >
            <el-submenu :index="item.url" v-for="item in this.menusList" :key="item.id">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item :index="child.url"
                            v-for="child in item.children" :key="child.id">
                {{child.name}}
              </el-menu-item>


            </el-submenu>

          </el-menu>
        </el-aside>
        <el-container>
          <el-header>
            <i class="el-icon-tickets"></i>
            <h3>Vue Admin Panel</h3>
            <div>
              您好，xxx
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  个人中心<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="/admin/user/modify-avatar">设置头像</el-dropdown-item>
                  <el-dropdown-item command="/admin/user/modify-password">修改密码</el-dropdown-item>
                  <el-dropdown-item command="/admin/user/logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </div>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
  export default {
    name: "Home",
    data(){
      return {
        menusList:[]
      }
    },
    created() {
      this.getMenus();
    },
    methods:{
      getMenus(){
        this.axios.get('/api/admin/menu/get-tree-menu').then(res=>{
          this.menusList = res.data.data;

        }).catch(err=>{
          this.$message.error(err.response.data.message)
        })
      },
      handleCommand(command){
        if(command === '/admin/user/logout'){
          this.logout()
        }
        else{
          this.$router.push(command)
        }

      },
      logout(){
        this.axios.post('/api/auth/logout').then(res=>{
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
          //清除token
          localStorage.removeItem('token')
          //跳转登陆页
          this.$router.push('/login')
        }).catch(err=>{
          this.message.error(err.response.data.message);
        });
      }
    }
  }
</script>

<style scoped lang="less">
.home{
  height: 100%;
  .el-container{
    height: 100%;
    .el-aside{
      background-color: #545c64;
      .logo{
        height: 60px;
        background: url("../assets/logo.png");
        background-size: cover;
      }
      .el-menu{
        border-right: none;
      }
    }
    .el-header{
      background-color: #545c64;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color:#fff;
      .el-dropdown-link{
        i{
          font-size: 13px;
        }
      }
      i{
        font-size: 35px;
        cursor: pointer;
      }
      span{
        color:#409eff;
        cursor: pointer;
        margin-left: 3px;
      }
    }
  }
}
</style>
